<!DOCTYPE html>
<html>
<head>
<title>豆瓣top250</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="static/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="static/css/style.css" type="text/css" rel="stylesheet" media="all">
<link rel="shortcut icon" href="static/bitbug_favicon.ico">
<!-- //Custom Theme files -->
<!-- js -->
<script src="static/js/jquery-1.11.1.min.js"></script>
<!-- //js -->
<!-- font-awesome icons -->
<link href="static/css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons -->
<!-- start-smooth-scrolling-->
<script type="text/javascript" src="static/js/move-top.js"></script>
<script type="text/javascript" src="static/js/easing.js"></script>
<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){
				event.preventDefault();

		$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
			});
		});
</script>
<!--//end-smooth-scrolling-->	
</head>
<body>
	<!--banner-->
	<div class="banner ">
		<div class="header"><!--header-->
			<div class="container">		
				<nav class="navbar navbar-default" role="navigation">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<h1 class="navbar-brand"><a  href="/index">豆瓣top250</a></h1>
					</div>
					<div class="box">
						<div class="container-4">
							<form>
								<input type="search" id="search" placeholder="一个不能搜索的搜索框QwQ~" />
								<button class="icon"><i class="fa fa-search"></i></button>
							</form>
						</div>
					</div>
					<!--navbar-header-->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav navbar-right cl-effect-4">
							<li ><a href="/index">首页</a></li>
							<li class="active"><a href="/movie">电影</a></li>
							<li><a href="/score">评分</a></li>
							<li><a href="/word">词云</a></li>
                            <li><a href="/team">团队</a></li>
						</ul>	
						<div class="clearfix"> </div>
					</div>
				</nav>
			</div>
		</div>
        <div class="banner-text">
			<h2>这是一个豆瓣top250<br>数据分析的一个网站 </h2>
			<a class="more hvr-bounce-to-right" target="_blank" href="static/images/5.jpg">获取更多</a>
		</div>

	</div>
	<!--//banner-bottom-->
	<!--welcome-->
	<div class="welcome">
		<div class="container">
			<h3 class="title">豆瓣top250电影名单</h3>
			<div class="welcome-info">
				<div class="welcome-row">
                <a id="btn0"></a>
                <input id="pageSize" type="text" size="1" maxlength="2" value="getDefaultValue()"/><a> 条 </a> <a href="#" id="pageSizeSet">设置</a>&nbsp;
                <a id="sjzl"></a>&nbsp;
                <a  href="#" id="btn1">首页</a>
                <a  href="#" id="btn2">上一页</a>
                <a  href="#" id="btn3">下一页</a>
                <a  href="#" id="btn4">尾页</a>&nbsp;
                <a>转到&nbsp;</a>
                <input id="changePage" type="text" size="1" maxlength="4"/>
                <a>页&nbsp;</a>
                <a  href="#" id="btn5">跳转</a>

                <table id="mytable" align="center" class="table table-striped">
                        <tr>
                            <td>排名</td>
                            <td>电影名称</td>
                            <td>别名</td>
                            <td>电影简介</td>
                            <td>评分</td>
                            <td>评价数</td>
                            <td>简评</td>

                        <tr>
                        {% for movie in movies %}
                          <tr>
                            <td>{{ movie[0] }}</td>
                            <td>
                                <a  target="_blank" href={{ movie[4] }}>
                                {{ movie[1] }}
                                </a>
                            </td>
                            <td>{{ movie[2] }}</td>
                            <td>{{ movie[3] }}</td>
                            <td>{{ movie[6] }}</td>
                            <td>{{ movie[7] }}</td>
                            <td>{{ movie[8] }}</td>

                        <tr>
                        {% endfor %}
                    </table>

					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>

<div class="footer">
		<div class="container">
			<div class="footer-row">
				<div class="col-md-6 footer-logo">
					<h5><a href="index.html"> 豆瓣top250数据 </a></h5>
				</div>
				<div class="col-md-6 footer-nav">
					<ul>
						<li><a href="/index">首页</a></li>
						<li><a href="/movie" >电影</a></li>
						<li><a href="/score">评分</a></li>
						<li><a href="/word">词云</a></li>
						<li><a href="/team">团队</a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="footer-bottom">
				<div class="col-md-4 footer-grids">
					<p>当你仅有的一把工具是锤子，所有的东西看起来都像是钉子（When the only tool you have is a hammer, everything looks like a nail）</p>
					<h6>From<a  target="_blank" href="http://121.36.152.239/"> 博创空间</a> </h6>
				</div>
				<div class="col-md-4 footer-grids footer-mdl">
					<div class="col-md-6 grid-left">
						<ul>
							<li><a href="#"><i class="fa fa-angle-right"></i>富强</a></li>
							<li><a href="#"><i class="fa fa-angle-right"></i>民主</a></li>
							<li><a href="#"><i class="fa fa-angle-right"></i>文明</a></li>
							<li><a href="#"><i class="fa fa-angle-right"></i>和谐</a></li>
						</ul>
					</div>
					<div class="col-md-6 grid-left">
						<ul>
							<li><a href="#"><i class="fa fa-angle-right"></i>爱国</a></li>
							<li><a href="#"><i class="fa fa-angle-right"></i>敬业</a></li>
							<li><a href="#"><i class="fa fa-angle-right"></i>诚信</a></li>
							<li><a href="#"><i class="fa fa-angle-right"></i>友善</a></li>
						</ul>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-4 footer-grids">
					<ul>
						<li class="phn"><i class="fa fa-phone"></i>15383568133</li>
						<li><a href="mailto:example@mail.com"><i class="fa fa-envelope-o"></i> 1119393564@qq.com</a></li>
					</ul>
					<p>Copyright &copy; 2020.博创空间.GNR.李梦奥。<br>----------------前端素材来源于<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--footer-->
	<!--smooth-scrolling-of-move-up-->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear'
			};
			*/

			$().UItoTop({ easingType: 'easeOutQuart' });

		});

	</script>
    <script type="text/javascript">
            var pageSize = 20;    //每页显示的记录条数
             var curPage=0;        //当前页
             var lastPage;        //最后页
             var direct=0;        //方向
            var len;            //总行数
            var page;            //总页数
            var begin;
            var end;


            $(document).ready(function display(){
                len =$("#mytable tr").length - 1;    // 求这个表的总行数，剔除第一行介绍
                page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize);//根据记录条数，计算页数
                // alert("page==="+page);
                curPage=1;    // 设置当前为第一页
                displayPage(1);//显示第一页

                document.getElementById("btn0").innerHTML="当前 " + curPage + "/" + page + " 页    每页 ";    // 显示当前多少页
                document.getElementById("sjzl").innerHTML="数据总量 " + (len/2-0.5) + "";        // 显示数据量
                document.getElementById("pageSize").value = pageSize/2;



                $("#btn1").click(function firstPage(){    // 首页
                    curPage=1;
                    direct = 0;
                    displayPage();
                });
                $("#btn2").click(function frontPage(){    // 上一页
                    direct=-1;
                    displayPage();
                });
                $("#btn3").click(function nextPage(){    // 下一页
                    direct=1;
                    displayPage();
                });
                $("#btn4").click(function lastPage(){    // 尾页
                    curPage=page;
                    direct = 0;
                    displayPage();
                });
                $("#btn5").click(function changePage(){    // 转页
                    curPage=document.getElementById("changePage").value * 1;
                    if (!/^[1-9]\d*$/.test(curPage)) {
                        alert("请输入正整数");
                        return ;
                    }
                    if (curPage > page) {
                        alert("超出数据页面");
                        return ;
                    }
                    direct = 0;
                    displayPage();
                });


                $("#pageSizeSet").click(function setPageSize(){    // 设置每页显示多少条记录
                    pageSize = document.getElementById("pageSize").value;    //每页显示的记录条数
                    if (!/^[1-9]\d*$/.test(pageSize)) {
                        alert("请输入正整数");
                        return ;
                    }
                    len =$("#mytable tr").length - 1;
                    page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根据记录条数，计算页数
                    curPage=1;        //当前页
                     direct=0;        //方向
                     firstPage();
                });
            });

            function displayPage(){
                if(curPage <=1 && direct==-1){
                    direct=0;
                    alert("已经是第一页了");
                    return;
                } else if (curPage >= page && direct==1) {
                    direct=0;
                    alert("已经是最后一页了");
                    return ;
                }

                lastPage = curPage;

                // 修复当len=1时，curPage计算得0的bug
                if (len > pageSize) {
                    curPage = ((curPage + direct + len) % len);
                } else {
                    curPage = 1;
                }


                document.getElementById("btn0").innerHTML="当前 " + curPage + "/" + page + " 页    每页 ";        // 显示当前多少页

                begin=(curPage-1)*pageSize + 1;// 起始记录号
                end = begin + 1*pageSize - 1;    // 末尾记录号


                if(end > len ) end=len;
                $("#mytable tr").hide();    // 首先，设置这行为隐藏
                $("#mytable tr").each(function(i){    // 然后，通过条件判断决定本行是否恢复显示
                    if((i>=begin && i<=end) || i==0 )//显示begin<=x<=end的记录
                        $(this).show();
                });

             }
    </script>
	<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="static/js/bootstrap.js"></script>
</body>
</html>